<template>
	<view class="page-bg">
		<scroll-view class="goods-bg" @scroll="scrollGoods" @scrolltolower="scrolltolower" scroll-y>
			<unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="zhy_banner"
				field="_id,h5,long_h5,act_name,type,banner_image_url" @load="onqueryload">
				<swiper class="swiper-height" autoplay interval="6000" circular>
					<swiper-item v-for="(item ,index) in data" :key="item._id">
						<view class="swiper-item" v-if="data.ad_id==null" @click="clickBannerItem(item)">
							<image class="slide-img" mode="widthFix" :src="picServiceUrl + item.banner_image_url" />
						</view>
						<!-- #ifdef MP-WEIXIN -->
						<view class="" v-else>
							<ad-custom unit-id="data.ad_id"></ad-custom>
						</view>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<view class="" v-else>
							<image v-if="!(loading||data.length)" class="banner-image"
								:src="picServiceUrl+'/static/index/uni-center/headers.png'" mode="aspectFill"
								:draggable="false" />
						</view>
						<!-- #endif -->

					</swiper-item>
				</swiper>
			</unicloud-db>
			<view class="my-notice-bar">
				<uni-notice-bar show-icon scrollable text="uni-app 版正式发布，。" />
			</view>

			<!-- icon_list_firt -->
			<div class="list-btn-1">
				<div class="btns-bg-1">
					<div class="btn-item-1" @click="goDetail(item)" v-for="(item, index) in menus1" :key="index">
						<div>
							<img :src="picServiceUrl+item.icon" />
							<div>{{ item.name }}</div>
						</div>
					</div>
				</div>
			</div>

			<!-- icon_list_second -->
			<view>
				<div class="list-btn-2">
					<div class="btns-bg-2">
						<div class="btn-item-2" @click="goDetail(item)" v-for="(item, index) in menus2" :key="index">
							<div>
								<img :src="picServiceUrl+item.icon" />
								<div>{{ item.name }}</div>
							</div>
						</div>
					</div>
				</div>
			</view>

			<!-- icon_list_third:票 -->
			<view class="ticket_row">
				<div class="list-btn-3">
					<div class="btns-bg-3">
						<div class="btn-item-3" @click="goDetail(item)" v-for="(item, index) in menus3" :key="index">
							<div>
								<img :src="picServiceUrl+item.icon" />
								<div>{{ item.name }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="list-btn-4">
					<div class="btns-bg-4">
						<div class="btn-item-4" @click="goDetail(item)" v-for="(item, index) in menus4" :key="index">
							<div>
								<img :src="picServiceUrl+item.icon" />
								<div>{{ item.name }}</div>
							</div>
						</div>
					</div>
				</div>
			</view>

			<!-- 搜索 -->
			<!-- <div class="search-info">
				<div class="search-info-box">
					<input class="text" type="text" placeholder="输入关键字搜索店铺" v-model="keyword" />
					<view class="btn" @click="searchBusiness">搜索</view>
				</div>
			</div> -->
		</scroll-view>
	</view>
</template>

<script>
	const app = getApp();
	let isRepet = false;
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
	// import statusBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar";
	export default {
		components: {
			easyLoadimage,
			// statusBar
		},
		data() {
			return {
				userType: 1,
				picServiceUrl: app.globalData.picServiceUrl + app.globalData.fileRootDir,
				userInfo: null,
				businessInfo: null,
				timer: null,
				scrollTop: 500,
				userAccountType: 1,
				isLogin: false,
				menus1: [{
						name: "肯德基",
						icon: "/static/index/icon_kendeji.png",
						cate_name: '连锁餐饮',
						typeId: "肯德基",
					},
					{
						name: "麦当劳",
						icon: "/static/index/icon_maidanglao.png",
						cate_name: '连锁餐饮',
						typeId: "麦当劳",
					},
					{
						name: "星巴克",
						icon: "/static/index/icon_xingbake.png",
						cate_name: '连锁餐饮',
						typeId: "星巴克",
					},

					{
						name: "华莱士",
						icon: "/static/index/icon_hualaishi.png",
						cate_name: '连锁餐饮',
						typeId: "华莱士",
					},
					{
						name: "汉堡王",
						icon: "/static/index/icon_hanbaowang.jpeg",
						cate_name: '连锁餐饮',
						typeId: "汉堡王",
					},

					{
						name: "喜茶",
						icon: "/static/index/icon_xicha.png",
						cate_name: '连锁餐饮',
						typeId: "喜茶",
					},
					{
						name: "奈雪的茶",
						icon: "/static/index/icon_naixuedecha.png",
						cate_name: '连锁餐饮',
						typeId: "奈雪的茶",
					},
					{
						name: "瑞幸咖啡",
						icon: "/static/index/icon_ruixin.jpg",
						cate_name: '连锁餐饮',
						typeId: "瑞幸咖啡",
					},
					{
						name: "库迪咖啡",
						icon: "/static/index/icon_kudi.jpeg",
						cate_name: '连锁餐饮',
						typeId: "库迪咖啡",
					},
					{
						name: "必胜客",
						icon: "/static/index/icon_bishengke.jpg",
						cate_name: '连锁餐饮',
						typeId: "必胜客",
					},
					{
						name: "百果园",
						icon: "/static/index/icon_baiguoyuan.jpg",
						cate_name: '连锁餐饮',
						typeId: "百果园",
					},
					{
						name: "蜜雪冰城",
						icon: "/static/index/icon_mixuebingcheng.png",
						cate_name: '连锁餐饮',
						typeId: "蜜雪冰城",
					},
					{
						name: "古茗",
						icon: "/static/index/icon_guming.jpg",
						cate_name: '连锁餐饮',
						typeId: "古茗",
					},
					{
						name: "手机服务",
						icon: "/static/index/icon_shoujifuwu.png",
						cate_name: '未找到',
						typeId: "手机服务",
					},
				],
				menus2: [{
						name: "住酒店",
						icon: "/static/index/icon2_jiudian.png",
						cate_name: '特惠酒店',
						typeId: "酒店",
					},
					{
						name: "去打车",
						icon: "/static/index/icon2_dache.jpeg",
						cate_name: "打车出行",
						typeId: "打车",
					},
					{
						name: "去加油",
						icon: "/static/index/icon2_jiayou.png",
						cate_name: "打车出行",
						typeId: '加油',
					},
					{
						name: "想购物",
						icon: "/static/index/icon2_gouwu.png",
						cate_name: "电商",
						typeId: '未找到',
					},
					{
						name: "找代驾",
						icon: "/static/index/icon2_daijia.png",
						cate_name: "打车出行",
						typeId: '代驾',
					},
					{
						name: "寄快递",
						icon: "/static/index/icon2_kuaiji.png",
						cate_name: "快递优惠",
						typeId: '寄快递',
					},
					{
						name: "买门票",
						icon: "/static/index/icon2_menpiao.jpeg",
						cate_name: "本地生活",
						typeId: '景点门票',
					},
					{
						name: "吃喝玩乐",
						icon: "/static/index/icon2_chihewanle.png",
						cate_name: "本地生活",
						typeId: '吃喝玩乐',
					},

				],
				menus3: [{
					name: "饿了么外卖",
					icon: "/static/index/icon3.png",
					cate_name: "饿了么",
					typeId: 1,
				}, ],
				menus4: [{
					name: "美团外卖",
					icon: "/static/index/icon4.png",
					cate_name: "美团",
					name: "美团外卖",
				}, ],
				keyword: '',

				roleType: null,
				state: 0,
				goodsList: null,
				location: null,
				orderList: [],
				thePage: 1,
				crrOrderItem: null,
				formData: {
					code: "",
					qrcode: ""
				},
				picPath: [],
				offlineBusinessList: [],
				noMore: true,
				isRepeat: true,
				busMore: true,
				busPage: 1,
				sharId: null,
				keyword: '',
				environment: null,
				jumpMeituanItem: null,
			};
		},
		onLoad(e) {
			uni.showLoading({
				title: '',
				mask: true
			})
			// this.getTicketsAct()
			this.$logintool.login().then(res => {
				this.getMeituanQuanbao()
			})
			uni.hideLoading()
		},
		onShow() {},
		onPullDownRefresh() {
			this.setUserInfo()
			this.login()
			this.timer = setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			login() {
				uni.showLoading({
					title: '',
					mask: true
				})
				if (!this.isLogin) {
					this.$logintool.login().then(res => {
						console.log(res);
						this.setUserInfo()
						uni.hideLoading()
						uni.switchTab({
							url: '/pages/newIndex/newIndex'
						})
					})
				} else {
					uni.hideLoading()
				}
			},
			// 赋给当前用户赋值
			setUserInfo() {
				this.userType = uni.getStorageSync(app.globalData.session.userAccountType);
				this.userInfo = uni.getStorageSync(app.globalData.session.userInfo);
				this.businessInfo = uni.getStorageSync(app.globalData.session.businessInfo);
				this.userAccountType = uni.getStorageSync(app.globalData.session.userAccountType);
				this.isLogin = this.$logintool.isLogin()
			},
			/**
			 * banner加载后触发的回调
			 */
			onqueryload(data) {},
			/**
			 * 点击banner的处理
			 */
			clickBannerItem(item) {
				// 有外部链接-跳转url
				// long_h5,act_name.需要重新去生成long_h5
				uni.setStorageSync(app.globalData.jumpMeituan, this.jumpMeituanItem);
				uni.navigateTo({
					url: '/pages/third_h5/third_h5',
					fail(err) {
						console.log('跳转失败:' + JSON.stringify(err));
					}
				})

				/* if (item.open_url) {
					uni.navigateTo({
						url: '/uni_modules/uni-id-pages/pages/common/webview/webview?url=' + item.open_url +
							'&title=' + item.title,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} */
				// 其余业务处理
				/* uni.navigateTo({
					url: '/pages/qrCode/qrCode?id=123'
					// url: '/pages/zhy_business_info/addOrEdit'
				}) */
			},
			getUser() {
				var that = this;
				that.isLogin = true;
				userInfo = data.data;
				businessInfo = data.data.offlineBusiness
			},
			scrollGoods(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrolltolower(e) {
				console.log('scrolltolower');
			},
			async goDetail(item) {
				// 跳转第三方小程序
				uni.showLoading({
					title: '',
					mask: true
				})
				// 查询活动
				let act_param = {
					cate_name: item.cate_name,
					page: 1,
					pageSize: 100,
					url: 'union/act_list'
				}
				// #ifdef MP-WEIXIN
				act_param.xcx_spread = 1
				// #endif

				// #ifdef APP
				act_param.alipay_xcx_spread = 1
				// #endif
				let result = await this.$jutuike.request(act_param)
				// console.log('111111111');
				// console.log(JSON.stringify(result));
				let actItem = null
				if (result.result != null && result.result != undefined && result.result != '' &&
					result.result.code === 1 && result.result.data != null && result.result.data.total > 0) {
					// 存在值,判断act_name或者desc是否存在item.TypeId
					let list = result.result.data.data
					for (let i = 0; i < list.length; i++) {
						let act = list[i]
						if (act.act_name.indexOf(item.typeId) != -1) {
							// 存在
							actItem = act
							break
						}
					}
				} else {
					this.tipsOnNoAct()
					return
				}
				if (actItem == null) {
					this.tipsOnNoAct()
					return
				}
				// 存在，可以跳转。转链接
				// 根据item获取短链对象
				let actToLinkParam = {
					url: 'union/act',
					cate_name: item.cate_name,
					sid: this.$jutuike.getSid(uni.getStorageSync(app.globalData.session.userInfo).user_id),
					act_id: actItem.act_id, //活动ID，聚推客联盟活动列表接口获取 https://www.jutuike.com/doc/34
				}
				let jumpItem = await this.$jutuike.request(actToLinkParam)
				console.log('actToLinkParam', JSON.stringify(actToLinkParam));
				console.log('jumpItem', JSON.stringify(jumpItem));
				if (jumpItem == null || jumpItem.result.code != 1 || jumpItem.result.data == null ||
					jumpItem.result.data == '' || JSON.stringify(jumpItem.result.data) == '{}') {
					this.tipsOnNoAct()
					return
				} else {
					uni.setStorageSync(app.globalData.jumpItem, jumpItem.result.data)
					uni.navigateTo({
						url: '/pages/newIndex/thirdParty/thirdParty',
					})
				}
				uni.hideLoading()

			},
			tipsOnNoAct() {
				uni.showToast({
					title: '近期上线',
					icon: 'none'
				})
			},
			searchBusiness() {
				console.log('搜索店铺');
				console.log(this.keyword);
			},
			getTicketsAct() {
				// 查询电影票活动
				let param = {
					cate_name: '电影票',
					page: 1,
					pageSize: 1,
					url: 'union/act_list'
				}
				// #ifdef MP-WEIXIN
				param.xcx_spread = 1
				// #endif

				// #ifdef APP
				param.alipay_xcx_spread = 1
				// #endif
				let result = this.$jutuike.request(param)
				/*
				{
					name: "电影票",
					icon: "https://img.jutuike.com/taokeout/icon/tq_cinema_jtk_icon.png",
					url: "./thirdParty/thirdParty",
					type: 4,
					typeId: 7,//提前请求，对应thirdparty页面写死
				}
				*/

				console.log(result);
			},
			getMeituanQuanbao() {
				uni.showLoading({
					title: '',
					mask: true
				})
				// 获取美团券包长链接
				let that = this
				uniCloud.callFunction({
					name: 'zhy-jutuike',
					data: {
						operateType: 1,
						user_id: uni.getStorageSync(app.globalData.session.userInfo).user_id
					},
					success(res) {
						that.jumpMeituanItem = res.result
					},
					complete(res) {
						uni.hideLoading()
					}
				})
			}
		},
		onHide() {
			// 销毁
			console.log('onHide销毁');
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
	};
</script>

<style scoped lang="scss">
	::v-deep .easy-loadimage {
		image {
			border-radius: 20rpx;
		}
	}

	.pop-info {
		background: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 15px;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 20px;
			border-bottom: 1px solid #E2E2E2;
			padding-bottom: 10px;
			margin-bottom: 10px;

			image {
				width: 20px;
				height: 20px;
			}
		}

		.btn {
			color: #2979ff;
			line-height: 50px;
			border-bottom: 1px solid #E2E2E2;
		}

		.btn-confrm {
			display: flex;

			view {
				width: 120px;
				line-height: 35px;
				text-align: center;
				margin: 10px auto;
				background: #333;
				color: #fff;
			}
		}
	}

	.search-info {
		background: #fff;
		padding: 10px;

		.search-info-box {
			height: 30px;
			background: #F4F4F4;
			border-radius: 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 auto;
			padding-left: 20px;

			.text {
				flex: 1 1 0;
				font-size: 14px;
			}

			.btn {
				flex: 0 0 50px;
				text-align: center;
				font-size: 14px;
			}
		}
	}

	.goods-list {
		padding: 0 10px;

		.goods-item {
			background: #fff;
			margin: 15px 0;
			border-radius: 10px;
			position: relative;

			::v-deep .loading-img {
				height: 280px;
			}

			::v-deep .easy-loadimage {
				width: 100%;
				border-radius: 10px;

			}

			.label-info {
				display: inline-block;
				color: #fff;
				background: #333;
				padding: 3px 5px;
				font-size: 12px;
				border-radius: 5px;
				margin-left: 10rpx;
				font-weight: 400;
			}

			.goods-flex {
				display: flex;
				align-items: flex-end;
				padding: 0 10px 10px;

				.right {
					flex: 0 0 70px;

					.btn {
						height: 30px;
						line-height: 30px;
						text-align: center;
						border: 1px solid #333;
						border-radius: 5px;
						color: #fff;
						background: #333;
						font-size: 14px;
					}
				}

				.left {
					flex: 1 1 0;

					.name {
						font-size: 14px;
						font-weight: bold;
						margin: 5px 0;
						display: flex;
						align-items: center;
					}

					.address {
						font-size: 12px;
						color: #666;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.juli {
						font-size: 12px;
						color: #666;

						span {
							margin-left: 15px;
						}
					}
				}
			}


		}
	}

	.page-bg {
		background: rgba(242, 243, 248, 1);
	}

	.goods-bg {
		height: 100vh;
		background: rgba(242, 243, 248, 1);
	}

	.swiper-height {
		// height: 525rpx;
	}

	.slide-img {
		width: 100%;
	}

	.list-btn {
		width: 100%;
		margin: 15px 0;
	}

	.btns-bg {
		margin: 0 10px;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		border-radius: 15px;
		padding: 20px 0;
	}

	.btn-item {
		width: 20%;
		text-align: center;
		display: inline-block;
		margin-bottom: 10px;
		font-size: 24rpx;
	}

	.btn-item img {
		width: 40px;
		height: 40px;
		object-fit: cover;
	}

	/* .btn-content {
		position: absolute;
		/* top: 405px; */
	/* top: 330px; */
	// width: 100%;
	// } */

	/* .center-infos {
		margin: 0 10px;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		border-radius: 15px;
		padding: 20px 0;
		display: flex;
		justify-content: space-around;
	} */

	/* .swiperLevel {
		justify-content: space-around;
	} */

	/* .level2 {
		text-align: center;
		border: 1px solid #888888;
		display: inline-block;
		border-radius: 15px;
		line-height: 20px;
		height: 20px;
		font-size: 12px;
		color: #000;
		background-color: #fff;
		padding: 15rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
	} */

	/* .selected {
		border: 2px solid #111111;
	} */

	/* .info-hongbao {
		width: 31%;
		text-align: center;
	}

	.info-hongbao img {
		width: 100%;
	}

	.info-hongbao view {
		background-color: #111;
		color: #fff;
		font-size: 12px;
		line-height: 25px;
		border-radius: 5px;
	} */

	/* .good-info {
		padding: 10px;
	} */

	/* .good-menu {
		display: flex;
		align-items: center;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
	}

	.good-menu view {
		width: 25%;
		text-align: center;
		font-size: 12px;
		line-height: 25px;
	}

	.good-menu .active {
		background-color: #222;
		color: #fff;
	}

	.not-movie {
		width: 100%;
	}

	.good-menu-list .good-menu-tabs {
		background: rgba(242, 243, 248, 1);
	} */

	/* .goods-scroll {
		height: 100vh;
	}
 */
	/* .good-menu-list.fix {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.menu-title {
		min-width: 60px;
		width: auto !important;
		padding: 0 5rpx;
	}

	.menu-size {
		font-size: 14px !important;
	}
 */
	.top {
		width: 100%;
		background-color: rgba(242, 243, 248, 1);
		display: block;
	}

	.topsearch {
		width: 90%;
		margin-left: 5%;
		display: flex;
		padding: 4% 0 0 0;
		align-items: center;
	}

	.frame {
		background-color: white;
		width: 75%;
		border-radius: 40rpx;
		padding: 0 3%;

		border: 1px solid #3f3f3f;
	}

	.frame>input {
		font-size: 30rpx;
		margin: 6rpx 0;
		width: 75%;
		height: 50rpx;
		line-height: 50rpx;
	}

	.center {
		font-size: 30rpx;
	}

	.topsearch>text {
		width: 15%;
		margin-left: 5%;
		color: #fff;
		padding: 1.5% 3%;
		background-color: #000;
		border-radius: 40rpx;
		font-size: 34rpx;
		text-align: center;
	}

	.order-scroll {
		height: 88vh;
	}

	.order-items {
		margin: 10px;
		padding: 15px;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		border-radius: 5px;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #f6f6f6;
			border-radius: 5px;

			.title {
				padding: 10px;
				font-size: 20px;

				.number {
					font-size: 42px;
					margin-right: 10px;
				}

				.city {
					font-size: 18px;
				}

				.bus-name {
					font-size: 18px;
				}
			}

			.state {
				line-height: 75px;
				width: 75px;
				border-left: 1px solid #e2e2e2;
				text-align: center;
				// color: #266fe2;
			}
		}

		.center-msg {
			background: #f1fcf6;
			color: #36b172;
			padding: 15px;
			margin: 20px 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.link {
				text-decoration: underline;
				color: #266fe2;
			}

			.code-img {
				width: 100%;

				.top-code {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.right {
						font-size: 16px;
						color: #266fe2;
					}
				}

				.img {
					margin-top: 20px;
					width: 100%;
					background: #EEE;
				}
			}
		}


		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 5px 0;
		}

		.count {
			margin-top: 20px;
		}

		.price-df {
			font-size: 14px;
			padding-bottom: 20px;
			border-bottom: 1px solid #e3e3e3;
			justify-content: flex-end;
		}

		.shuxing {
			color: #666;
		}

		.other {
			font-size: 14px;
			color: #666;
		}

		.other-order {
			font-size: 14px;
			color: #666;
			margin-top: 10px;

			.link {
				margin-left: 15px;
				text-decoration: underline;
				color: #266fe2;
			}
		}
	}

	.my-notice-bar {
		width: 95%;
		margin-left: 2%;
		margin-top: 20rpx;
	}

	.ticket_row {
		display: flex;
	}


	.list-btn-1 {
		width: 100%;
		margin: 15px 0;
	}

	.btns-bg-1 {
		margin: 0 10px;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		border-radius: 15px;
		padding: 20px 0;
	}

	.btn-item-1 {
		width: 20%;
		text-align: center;
		display: inline-block;
		margin-bottom: 10px;
		font-size: 24rpx;
	}

	.btn-item-1 img {
		width: 40px;
		height: 40px;
		object-fit: cover;
	}

	.list-btn-2 {
		// width: 100%;
		margin: 15px 0;
		width: 86%;
		margin: 15px 0;
		margin-left: 7%;
	}

	.btns-bg-2 {
		margin: 0 10px;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		border-radius: 15px;
		padding: 20px 0;
	}

	.btn-item-2 {
		width: 25%;
		text-align: center;
		display: inline-block;
		margin-bottom: 10px;
		font-size: 24rpx;
	}

	.btn-item-2 img {
		width: 40px;
		height: 40px;
		object-fit: cover;
	}

	.list-btn-3 {
		width: 100%;
		margin: 15px 0;
	}

	.btns-bg-3 {
		margin: 0 10px;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		border-radius: 15px;
		padding: 20px 0;
	}

	.btn-item-3 {
		width: 100%;
		text-align: center;
		display: inline-block;
		margin-bottom: 10px;
		font-size: 24rpx;
	}

	.btn-item-3 img {
		width: 40px;
		height: 40px;
		object-fit: cover;
	}

	.list-btn-4 {
		width: 100%;
		margin: 15px 0;
	}

	.btns-bg-4 {
		margin: 0 10px;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		border-radius: 15px;
		padding: 20px 0;
	}

	.btn-item-4 {
		width: 100%;
		text-align: center;
		display: inline-block;
		margin-bottom: 10px;
		font-size: 24rpx;
	}

	.btn-item-4 img {
		width: 40px;
		height: 40px;
		object-fit: cover;
	}
</style>